<template>
  <div>
    <div class="my-card">
      <div class="my-card-header">
        <div class="flex items-center justify-between">
          <span>
            <span class="my-card-title">{{ $t('operator.account_info') }}</span>
          </span>
          <el-button
            v-if="isAuth('10400202.MANAGE')"
            type="primary"
            size="small"
            class="w-6"
            @click="openRemarkPopup"
          ><svg-icon icon-class="Edit"/></el-button>
        </div>
      </div>
      <div class="my-card-body">
        <div v-if="operator && operator.status !== 1" class="seal">
          <div class="subseal">
            {{ getStatus(operator.status) }}
          </div>
        </div>
        <el-descriptions v-if="operator" style="padding: 16px" :column="1">
          <el-descriptions-item
            v-if="operator.status === 1"
            :label="$t('operator.oid')"
            >{{ operator.oid }}</el-descriptions-item
          >
          <el-descriptions-item :label="$t('operator.operatorNo')">{{
            operator.operatorNo
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('operator.operatorId')">{{
            operator.operatorId
          }}</el-descriptions-item>
        </el-descriptions>
        <hr />
        <el-descriptions
          v-if="operator"
          style="padding: 16px 16px 0 16px"
          :column="2"
        >
          <el-descriptions-item :label="$t('operator.mobile')">{{
            operator.mobile
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('operator.linkman')">{{
            operator.linkman
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('operator.name')">{{
            operator.name
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('operator.shortName')">{{
            operator.shortName
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('operator.email')">{{
            operator.email
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('operator.billing_status')">{{
            formatBillingStatus(
              ancillaryInfo !== null ? ancillaryInfo.billingStatus : null
            )
          }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions style="padding-left: 16px" :column="1">
          <el-descriptions-item :label="$t('operator.remark')">{{
            ancillaryInfo === null ? '' : ancillaryInfo.adminRemark
          }}</el-descriptions-item
          >-->
        </el-descriptions>
        <hr />

        <el-descriptions style="padding: 16px" :column="2">
          <el-descriptions-item :label="$t('operator.country')">{{
            operator === null
              ? ''
              : $t('country_or_region.' + operator.countryCode)
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('operator.region')">{{
            ancillaryInfo === null ? '' : formatRegion(ancillaryInfo)
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('operator.provName')">{{
            operator === null ? '' : operator.provName
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('operator.cityName')">{{
            operator === null ? '' : operator.cityName
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('developer.address')">{{
            operator === null ? '' : operator.address
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <resetpw-operator ref="resetpw" />
    <template>
      <el-dialog
        v-model="editPopupVisible"
        :title="$t('common.set')"
        width="800px"
        @close="handleCloseRemark"
      >
        <el-form
          size="small"
          ref="formData"
          :model="formData"
          :rules="rules"
          label-width="130px"
        >
          <el-form-item :label="$t('operator.name')" prop="operatorName">
            <el-input
              v-model="formData.operatorName"
              maxlength="128"
              @blur="
                () => (formData.operatorName = formData.operatorName.trim())
              "
              clearable
              show-word-limit
            />
          </el-form-item>
          <el-form-item :label="$t('operator.shortName')">
            <el-input
              v-model="formData.operatorShortName"
              maxlength="128"
              @blur="
                () =>
                  (formData.operatorShortName =
                    formData.operatorShortName.trim())
              "
              clearable
              show-word-limit
            />
          </el-form-item>
          <el-form-item :label="$t('operator.billing_status')">
            <el-radio v-model="formData.billingStatus" label="0">{{
              $t('operator.unbilled')
            }}</el-radio>
            <el-radio v-model="formData.billingStatus" label="1">{{
              $t('operator.billed')
            }}</el-radio>
          </el-form-item>
          <el-form-item :label="$t('operator.linkman')">
            <el-input
              v-model="formData.linkMan"
              maxlength="64"
              @blur="() => (formData.linkMan = formData.linkMan.trim())"
              clearable
              show-word-limit
            />
          </el-form-item>
          <el-form-item :label="$t('operator.email')" prop="email">
            <el-input
              v-model="formData.email"
              maxlength="128"
              @blur="() => (formData.email = formData.email.trim())"
              clearable
              show-word-limit
            />
          </el-form-item>
          <el-form-item :label="$t('operator.mobile')" prop="phoneNum">
            <el-input
              v-model="formData.phoneNum"
              maxlength="32"
              @blur="() => (formData.phoneNum = formData.phoneNum.trim())"
              clearable
              show-word-limit
            />
          </el-form-item>
          <el-form-item :label="$t('operator.region')">
            <el-select
              v-model="formData.operatorAreaCode"
              clearable
              :placeholder="$t('operator.region')"
            >
              <el-option
                v-for="areaCode in regionsList"
                :key="areaCode.regionCode"
                :value="areaCode.regionCode"
                :label="areaCode.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('operator.country')" prop="countryCode">
            <el-select
              v-model="formData.countryCode"
              filterable
              :placeholder="$t('operator.country')"
              style="width: 100%"
            >
              <el-option
                v-for="item in countryData"
                :key="item.countryCode3"
                :label="$t('country_or_region.' + item.countryCode3)"
                :value="item.countryCode3"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('operator.provName')">
            <el-input
              v-model="formData.provName"
              rows="2"
              maxlength="32"
              @blur="() => (formData.provName = formData.provName.trim())"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('operator.cityName')">
            <el-input
              v-model="formData.cityName"
              rows="2"
              maxlength="64"
              @blur="() => (formData.cityName = formData.cityName.trim())"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('developer.address')">
            <el-input
              type="textarea"
              v-model="formData.address"
              rows="2"
              maxlength="128"
              @blur="() => (formData.address = formData.address.trim())"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('operator.remark')">
            <el-input
              type="textarea"
              v-model="formData.adminRemark"
              rows="4"
              clearable
              maxlength="512"
              @blur="() => (formData.adminRemark = formData.adminRemark.trim())"
              show-word-limit
            ></el-input>
          </el-form-item> </el-form
        ><template #footer>
          <div>
            <el-button size="small" @click="editPopupVisible = false">{{
              $t('common.cancel')
            }}</el-button>
            <el-button
              size="small"
              type="primary"
              :loading="confirmLoading"
              @click="submit"
              >{{ $t('common.confirm') }}</el-button
            >
          </div></template
        >
      </el-dialog>
    </template>
  </div>
</template>

<script>
import { formatCountry } from '@/utils/formatCountry'
import resetpwOperator from './account/resetpw-operator.vue'
import { getAncillary, getOperatorInfo, getRegions, postAncillary } from '@/api'
import countryJson from '@/assets/static/country.json'
import { checkPhoneNum } from '@/utils/validate'
import { isAuth } from '@/utils'

export default {
  components: { resetpwOperator },
  data() {
    return {
      operator: null,
      ancillaryInfo: null,
      editPopupVisible: false,
      confirmLoading: false,
      countryData: countryJson,
      formData: {
        phoneNum: '',
        linkMan: '',
        operatorName: '',
        operatorShortName: '',
        email: '',
        countryCode: '',
        provName: '',
        cityName: '',
        address: '',
        adminRemark: '',
        billingStatus: null,
        operatorAreaCode: ''
      },
      adminRemark: '',
      billingStatus: null,
      operatorAreaCode: '',
      regionsList: [],
      rules: {
        operatorName: [
          {
            required: true,
            message: this.$t('common.nullInputTip'),
            trigger: 'blur'
          }
        ],
        phoneNum: [
          {
            validator: checkPhoneNum,
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: this.$t('common.rule_input'),
            trigger: 'blur'
          },
          {
            type: 'email',
            message: this.$t('user.email_format_error'),
            trigger: 'blur'
          }
        ],
        countryCode: [
          {
            required: true,
            message: this.$t('common.nullInputTip'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    getStatus(status) {
      if (status === 0) {
        return this.$t('operator.locked')
      } else if (status === 2) {
        return this.$t('operator.pendingReview')
      } else if (status === 3) {
        return this.$t('operator.reject')
      }
    },
    handleAdminRemark(adminRemark) {
      console.log('adminRemark', adminRemark)
      if (
        adminRemark !== null &&
        adminRemark !== undefined &&
        adminRemark !== ''
      ) {
        this.formData.adminRemark = adminRemark.trim()
        this.adminRemark = adminRemark.trim()
      } else {
        this.formData.adminRemark = ''
        this.adminRemark = ''
      }
    },
    init(operator) {
      this.operator = operator
      // this.formData = {}
      this.formData.phoneNum = operator.mobile
      this.formData.linkMan = operator.linkman
      this.formData.operatorName = operator.name
      this.formData.operatorShortName = operator.shortName
      this.formData.email = operator.email
      this.formData.countryCode = operator.countryCode
      this.formData.provName = operator.provName
      this.formData.cityName = operator.cityName
      this.formData.address = operator.address
      this.getAncillary()
      this.regionsList = []
      getRegions().then((res) => {
        var i18nLocale = this.$i18n.locale
        this.regionsList = res
        this.initRegionsList(i18nLocale)
      })
    },
    initRegionsList(i18nLocale) {
      if (this.regionsList !== null && this.regionsList.length > 0) {
        this.regionsList.map((regions) => {
          if (i18nLocale === 'en-US') {
            regions.label = regions.regionNameEn
          } else if (i18nLocale === 'zh-CN') {
            regions.label = regions.regionNameZh
          } else if (i18nLocale === 'pt-BR') {
            regions.label = regions.regionNamePt
          } else if (i18nLocale === 'ja-JP') {
            regions.label = regions.regionNameJp
          } else {
            regions.label = regions.regionNameEn
          }
        })
      }
    },
    formatCountry(value) {
      return formatCountry(value)
    },
    formatRegion(value) {
      var i18nLocale = this.$i18n.locale
      if (
        value.operatorAreaCode !== null &&
        value.operatorAreaCode !== undefined &&
        value.operatorAreaCode !== ''
      ) {
        if (i18nLocale === 'en-US') {
          return value.region.regionNameEn
        } else if (i18nLocale === 'zh-CN') {
          return value.region.regionNameZh
        } else if (i18nLocale === 'pt-BR') {
          return value.region.regionNamePt
        } else if (i18nLocale === 'ja-JP') {
          return value.region.regionNameJp
        } else {
          return value.region.regionNameEn
        }
      }
    },
    formatBillingStatus(billingStatus) {
      if (billingStatus !== null && billingStatus !== undefined) {
        if (billingStatus === 1) {
          return this.$t('operator.billed')
        } else if (billingStatus === 0) {
          return this.$t('operator.unbilled')
        }
        return ''
      }
      return ''
    },
    openRemarkPopup() {
      // 点击编辑图标时触发，打开编辑弹出窗口
      this.formData.adminRemark = this.ancillaryInfo.adminRemark
      this.formData.billingStatus =
        this.ancillaryInfo.billingStatus !== null
          ? this.ancillaryInfo.billingStatus.toString()
          : null
      this.formData.operatorAreaCode = this.ancillaryInfo.operatorAreaCode
      this.formData.phoneNum = this.operator.mobile
      this.formData.linkMan = this.operator.linkman
      this.formData.operatorName = this.operator.name
      this.formData.operatorShortName = this.operator.shortName
      this.formData.email = this.operator.email
      this.formData.countryCode = this.operator.countryCode
      this.formData.provName = this.operator.provName
      this.formData.cityName = this.operator.cityName
      this.formData.address = this.operator.address
      this.editPopupVisible = true
      this.$refs.form.clearValidate()
      this.$refs.form.resetFields()
    },
    handleCloseRemark() {
      this.editPopupVisible = false
      this.$refs.formData.clearValidate()
      this.$refs.formData.resetFields()
    },
    submit() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          console.log(this.formData)
          this.formData.operatorId = this.operator.operatorId
          this.formData.platCode = 'TOMS'
          postAncillary(this.formData)
            .then((res) => {
              // TODO 发送请求
              // this.getAncillary()
              this.getOperator()
              this.editPopupVisible = false
              this.$message.success(this.$t('common.message.operation_success'))
            })
            .catch((err) => {
              this.$confirmError(err)
            })
        }
      })
    },
    getAncillary() {
      getAncillary({ platCode: 'TOMS', operatorId: this.operator.operatorId })
        .then((res) => {
          this.ancillaryInfo = res
          this.formData.billingStatus = res.billingStatus
          this.formData.adminRemark = res.adminRemark
          this.formData.operatorAreaCode = res.operatorAreaCode
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    getOperator() {
      getOperatorInfo(this.operator.operatorId)
        .then((res) => {
          this.init(res)
          this.$emit('update-name', res.name)
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    isAuth
  },
  watch: {
    '$i18n.locale': function (newLocale, oldLocale) {
      console.log('语言已变为：', newLocale)
      // 在这里执行你想要的操作，比如刷新页面或重新加载数据等
      this.initRegionsList(newLocale)
    }
  }
}
</script>

<style lang="scss" scoped>
.my-card {
  background: #ffffff;
  border: 1px solid #eef0f7;
  box-shadow: 0px 0px 21px 0px rgba(19, 33, 68, 0.08);
  border-radius: 12px;
  margin: 0 36px;
  .my-card-header {
    padding: 12px 16px;
    border-bottom: solid 1px #eef0f7;
    .my-card-title {
      color: var(--el-color-primary);
      font-size: 14px;
      font-weight: 500;
      line-height: 24px;
    }
  }

  .my-card-body {
    padding: 36px;
    padding-left: 100px;
    padding-right: 100px;
    position: relative;
    ::v-deep .el-descriptions-item__label.has-colon {
      flex: none;
    }
  }
}
.seal {
  height: 100px;
  top: -24px;
  right: 70px;
  border: solid 6px #f56c6c;
  border-radius: 16px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(-15deg);
  .subseal {
    height: 80px;
    margin: 4px;
    padding: 12px;
    border: solid 2px #f56c6c;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 900;
    color: #f56c6c;
  }
}

::v-deep .el-descriptions__body {
  color: #677796;
}
</style>
